<template>
  <div class="step-bar flex-center">
    <div v-for="(step, index) in steps" :key="index" class="step q-px-lg"
      :class="{ active: index == 当前序号, completed: index < 当前序号 }">
      {{ 现标题(step, index) }}
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { computed } from 'vue';

const props = defineProps({
  steps: {
    type: Array,
    required: true
  },
  当前值: {
    type: String,
    required: true
  }
});

const 当前序号 = computed(() => {
  const index = props.steps.indexOf(props.当前值);
  return index
})

function 现标题(step, index) {
  if (index == 当前序号.value && index != props.steps.length - 1) {
    return step + "中"
  }
  return step
}
</script>

<style scoped lang="scss">
$kk: 15px;
$marginValue: -$kk + 2px;

.step-bar {
  display: flex;
  overflow-x: auto;
  padding-right: $kk;
}

.step {
  position: relative;
  min-width: 100px;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  color: white;
  font-weight: bold;
  background-color: #ccc;
  clip-path: polygon(0 0, calc(100% - $kk) 0, 100% 50%, calc(100% - $kk) 100%, 0 100%, $kk 50%);
  margin-right: $marginValue;
  z-index: 1;
}

.step.active {
  background-color: #007BFF;
}

.step.completed {
  background-color: #28a745;
}
</style>